<style>
#wx-imgtab{position: relative;overflow: hidden;}
#wx-imgtab img{display:none;width:710px;}
#wx-imgtab ul{position: absolute;width:180px;bottom:4px;right:20px;}
#wx-imgtab ul li{display:inline-block;width:50px;height:10px;background-color:#3991A7;margin-left:4px;cursor: pointer;}
#wx-imgtab ul li.current{background-color: #A8575E;}
</style>
<script>
var imgtab = {
	timer:null,
	current:0,
	total:0,
	show:function(seq){
		
		$("#wx-imgtab img").hide();
		$("#wx-imgtab img").eq(seq).show();
		$("#wx-imgtab ul li").removeClass('current');
		$("#wx-imgtab ul li").eq(seq).addClass('current');
	},
	init:function(){
		this.total = $("#wx-imgtab img").length;

		var that = this;
		$("#wx-imgtab ul li").click(function(){
			that.show($(this).attr('seq'));
			clearInterval(that.timer);
			that.timer = setInterval(that.next,5000);
		});
		this.show(this.current);
		this.timer = setInterval(this.next,5000);
	},
	next:function(){
		if(imgtab.current==imgtab.total-1){
			imgtab.current=0;
		}else{
			imgtab.current++;
		}
		imgtab.show(imgtab.current);
	}
	
};
$(document).ready(function(){
	imgtab.init();
});
</script>
<div id="wx-imgtab">
	<?php
	foreach($data as $key=>$val){
		?>
		<img src="<?=$val?>" />
		<?php
	}
	?>
	<ul><li seq=0></li><li seq=1></li><li seq=2></li></ul>
</div>
